<template>
  <div class="box">
    <form @submit="formSubmit" report-submit>
        <div class="title">收货人信息</div>
        <div class="df jsb aic fs30 item">
          <label for="name"> <span class="mustWrite">*</span>收货人姓名</label>
          <input class="tr fs30 flex1"  type="text" name="shipping_name" v-model.lazy ="info.shipping_name"/>
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>收货人电话</label>
          <input class="tr fs30"  type="number" name="shipping_tel" maxlength="11"  v-model.lazy ="info.shipping_tel" />
        </div>
        <div class="df jsb fs30 item">
            <label><span class="mustWrite">*</span>收货地址</label>
          <textarea class="tr" placeholder="请输入发货地址" name="shipping_address" id="" v-model.lazy ="info.shipping_address" auto-height style="width:70%"></textarea>
          <!-- <input type="text" class="tr flex1"  name="shipping_address" v-model.lazy ="info.shipping_address" /> -->
        </div>
        <div class="title">发货人信息</div>
        <div class="df jsb item fs30 item"  @click="showSinglePicker('user_id')">客户姓名：
          <input class="tr" type="text" disabled v-model="customer_name"  placeholder="请选择客户姓名" >
          <input type="text" name="customer_id" disabled hidden v-model="info.customer_id">
        </div>
        <div class="df jsb aic fs30 item">
          <label for="name"> <span class="mustWrite">*</span> 发货人姓名</label>
          <input class="tr fs30" placeholder="请选择姓名" name="ship_name" type="text" v-model.lazy ="info.ship_name" />
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>发货人电话</label>
          <input class="tr fs30" placeholder="请输入发货人电话" type="number" maxlength="11" name="ship_tel" v-model.lazy ="info.ship_tel" />
        </div>
        <div class="df jsb fs30 item">
          <label><span class="mustWrite">*</span>发货地址</label>
          <textarea class="tr" placeholder="请输入发货地址" name="ship_address" id="" v-model.lazy ="info.ship_address"  auto-height style="width:70%" v-if="!show && !hideText"></textarea>
          <!-- <input class="tr flex1" placeholder="请输入发货地址" type="text" name="ship_address" v-model.lazy ="info.ship_address" /> -->
        </div>
         <div class="title">货物信息</div>
            <div class="df jsb fs30 item">
            <label><span class="mustWrite"></span>货物信息及备注</label>
            <textarea class="tr" placeholder="请输入货物信息" name="remark" id="" v-model.lazy ="info.remark" auto-height style="width:68%" v-if="!show && !hideText"></textarea>
            <!-- <input class="tr flex1" placeholder="请输入货物信息" type="text" name="remark" v-model.lazy ="info.remark" /> -->
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>发货时间</label>
          <input class="tr" type="text" placeholder="请选择发货时间" disabled name='ship_datetime' v-model.lazy ="info.ship_datetime" @click="showDateTime('fa')">
        </div>
        <div class="df jsb aic fs30 item" v-if="isManage || info.state==='2'" @click="showDateTime('shou')">
          <label><span class="mustWrite">*</span>收货时间</label>
          <input class="tr" type="text" placeholder="请选择收货时间" disabled name='shipping_datetime' v-model.lazy ="info.shipping_datetime">
        </div>
        <div class="df jsb" v-if="!isManage && info.state !== '2'">
          <button size="mini" class="add_submit mainBgColor fs30" form-type="submit" data-type='click' data-id="save">仅保存</button>
          <button size="mini" class="add_submit mainBgColor fs30" form-type="submit" data-type='click' data-id="tips">保存并提醒</button>
        </div>
        <div class="df jsb" v-if="isManage && info.state !== '2'">
          <button size="mini" class="add_submit mainBgColor fs30" form-type="submit" data-type='click' data-id="manage">确认</button>
        </div>
        <div class="df jsb" v-if="isManage && info.state === '2'">
          <button size="mini" class="add_submit mainBgColor fs30" disabled>已确认</button>
        </div>
      </form>
      <div v-if="show" class="model">
        <van-datetime-picker
          type="datetime"
          title="请选择日期"
          @confirm="dateTimeconfirm"
          @cancel="cancel"
        />
      </div>
      <mpvue-picker  ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" :deepLength = "deepLength" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import _number from 'lodash/number'
import mpvuePicker from 'mpvue-picker'
import customerRecord from '@/components/customerRecord'
import uuid from 'uuid/v1'
import mSelect from '@/components/m_select'
import { getshipUpdate, getshipAdd, getshipFind, getshippingInfo, getCustomerList } from '@/api'
export default {
  components: {
    mpvuePicker,
    customerRecord,
    mSelect
  },
  data () {
    return {
      info: {},
      isshowTimePicker: false,
      type: '',
      show: false,
      hideText: false,
      timeType: '',
      isManage: false,
      pickerValueDefault: [],
      pickerValueArray: [],
      customer_name: ''
    }
  },
  methods: {
    showSinglePicker (type) {
      this.hideText = true
      this.$refs.mpvuePicker.show()
    },
    onConfirm  (e) {
      if (e) {
        this.customer_name = e.label
        this.info.customer_id = e.value[0]
      }
      this.hideText = false
    },
    onCancel () {
      this.hideText = false
    },
    showDateTime (v) {
      this.timeType = v
      if (!this.show) {
        this.show = true
      } else {
        this.show = false
      }
    },
    cancel () {
      this.show = false
    },
    dateTimeconfirm (v) {
      if (this.timeType === 'shou') {
        this.info.shipping_datetime = dayjs(v.mp.detail).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.info.ship_datetime = dayjs(v.mp.detail).format('YYYY-MM-DD HH:mm:ss')
      }
      this.show = false
    },
    bindDateChange (e) {
      this.info.date_time = e.mp.detail.value
    },
    async formSubmit (v) {
      if (v.target.target.dataset.id === 'tips') {
        this.info.type = 1
      } else if (v.target.target.dataset.id === 'save') {
        this.info.type = 0
      } else {
        this.info.type = 2
      }
      let result = {}
      let text = ''
      if (!v.mp.detail.value.ship_tel || !v.mp.detail.value.ship_address || !v.mp.detail.value.ship_datetime || !v.mp.detail.value.ship_name || !v.mp.detail.value.shipping_name || !v.mp.detail.value.shipping_tel || !v.mp.detail.value.shipping_address) {
        wx.showToast({
          title: '请将必填项填写完整',
          icon: 'none',
          duration: 2000
        })
      } else if (!(/^1(3|4|5|7|8)\d{9}$/.test(v.mp.detail.value.ship_tel))) {
        wx.showToast({
          title: '手机格式不正确',
          icon: 'none',
          duration: 2000
        })
      } else if (!(/^1(3|4|5|7|8)\d{9}$/.test(v.mp.detail.value.shipping_tel))) {
        wx.showToast({
          title: '手机格式不正确',
          icon: 'none',
          duration: 2000
        })
      } else {
        if (this.isManage) {
          result = await getshipUpdate(this.info)
          text = '确认'
        } else {
          if (this.query === 'add') {
            result.code = 'YS' + dayjs().format('YYYYMMDDHHmmss') + _number.random(1000, 9999)
            result = await getshipAdd(this.info)
            text = '新增'
          } else {
            result = await getshipUpdate(this.info)
            text = '修改'
          }
        }
        if (result.errno === 0) {
          wx.showToast({
            title: text + '成功',
            duration: 2000
          })
          setTimeout(function () {
            wx.navigateBack()
          }, 2000)
        } else {
          wx.showToast({
            // title: text + '失败，请重试',
            title: result.errmsg,
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  },
  async mounted () {
    var role = mpvue.getStorageSync('useInfo').role
    if (role.length > 0) {
      for (let i in role) {
        if (role[i].id === '1') {
          this.isManage = true
        }
      }
    }
    this.query = this.$mp.query.text
    const cusRes = await getCustomerList('', '')
    this.pickerValueArray = []
    if (cusRes.data) {
      cusRes.data.forEach(element => {
        this.pickerValueArray.push({
          label: element.name,
          value: element.id
        })
      })
    }
    if (this.$mp.query.text === 'edit') {
      const data = await getshipFind(this.$mp.query.id)
      this.info = data.data
      if (this.info.customer_id) {
        for (let i in this.pickerValueArray) {
          if (this.info.customer_id === this.pickerValueArray[i].value) {
            this.customer_name = this.pickerValueArray[i].label
          }
        }
      } else {
        this.customer_name = ''
      }
    } else {
      let res = await getshippingInfo()
      this.info = {
        code: 'CZJL' + dayjs().format('YYYYMMDDHHmmss') + _number.random(1000, 9999),
        id: uuid(),
        ship_datetime: dayjs(new Date()).format('YYYY-MM-DD HH:mm'),
        ship_name: res.data.ship_name,
        ship_address: res.data.ship_address,
        ship_tel: res.data.ship_tel,
        shipping_address: res.data.shipping_address,
        shipping_name: res.data.shipping_name,
        shipping_tel: res.data.shipping_tel
      }
    }
  }
}
</script>

<style scoped>
  .title{line-height: 80rpx;height: 80rpx;padding: 0 20rpx;background: #eee;font-size: 28rpx;}
  .add_submit{width: 30%;border-radius:10rpx;color: #fff;padding: 10rpx 0;margin-top: 50rpx;}
  .box{background: #eee;padding-bottom: 8vh}
  .item{border-bottom: 1px solid #eee;background: #fff;padding: 20rpx 30rpx;}
  .mb20{margin-bottom: 20rpx}
  .close{position: absolute !important;right: -25rpx !important; top: -25rpx !important;font-size: 50rpx;}
  .colorgray{color: #242424;}
  .pics{padding: 20rpx;}
  .mustWrite{color: red}
  .model{position: fixed;bottom: 0px;left: 0;z-index: 9;width: 100%;}
</style>
